<template>
	<div style="width: 100%;">
		<div class="columnBox" :style="getTitleBox(itemData.titleCss)">
			<div class="li bgColor" v-for="(item,index) in list" :style="getWidthLiSum(list.length)">
				{{item.title}}
			</div>
		</div>
		<div v-for="(item,index) in form[childrenListName]" :key="index">
			<div class="columnBox" :style="getContentBox(index + 1 == form[childrenListName].length)">
				<div class="li bgColor" v-for="(xItem,x) in list" :key="x" :style="getWidthLiSum(list.length)">
					<com-form :item="xItem" :form="form[childrenListName][index]" style="height: 100%;width: 100%;" v-if="xItem.type"></com-form>
					<div :style="getContentCss(itemData.contentCss,xItem.contentCss)" v-else>
						{{item[xItem.prop]}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import cssStyle from './js/cssStyle.js'
	export default {
		components: {
			comForm: () => import('./comForm.vue')
		},
		props: {
			itemData: {
				type: Object,
				default: () => {}
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			form: {
				type: Object,
				default: () => {}
			},
			childrenListName: {
				type: String,
				default: ''
			}
		},
		mixins: [cssStyle],
		methods: {
			getTitleBox(titleCss) {
				let cssStyle = ``
				if (this.childrenListName) {
					cssStyle += `border-bottom: none;`
				} else if (Array.isArray(this.form[this.childrenListName]) && this.form[this.childrenListName].length == 0) {
					cssStyle += `border-bottom: none;`
				}
				if (Array.isArray(this.form[this.childrenListName]) && this.form[this.childrenListName].length > 0) {
					cssStyle += `border-bottom: 1px solid #E6E6E6;`
				}

				cssStyle += this.getCssStyle(titleCss)
				return cssStyle
			},
			getContentBox(show) {
				let cssStyle = ``
				if (show) {
					cssStyle += `border-bottom: none;`
				}
				return cssStyle
			},
			getContentCss(contentCss, contentCss2) {
				let cssStyle = ``
				cssStyle += this.getCssStyle(contentCss)
				cssStyle += this.getCssStyle(contentCss2)
				return cssStyle
			}
		}
	}
</script>

<style lang="scss" scoped>
	.columnBox {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #E6E6E6;

		// &:last-child {
		// 	border-bottom: none;
		// }
	}

	.li {
		border-right: 1px solid #E6E6E6;
		width: 50%;
		min-height: 50px;
		display: flex;
		font-size: 14px;

		&:last-child {
			border-right: none;
		}
	}

	.liData {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #E6E6E6;
	}

	.bgColor {
		// background-color: #8a8a8a;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>